<template>
  <div>
    <van-nav-bar
      title="注册"
      left-text="返回登录"
      left-arrow
      @click-left="onClickLeft"
    >
    </van-nav-bar>
    <div class="img_box">
      <van-image
        :src="require('../assets/logo.png')"
        width="100"
        height="100"
        radius="50"
        style="text-align: center"
      />
    </div>
    <!-- 注册表单 -->
    <van-form @submit="onSubmit">
      <van-field
        v-model="email"
        name="email"
        label="邮箱"
        maxlength="20"
        left-icon="contact"
        placeholder="请输入邮箱账号"
        validate-trigger="onBlur"
        :rules="[
          { required, message: '请输入邮箱账号' },
          { pattern, message: '请输入正确的邮箱' },
        ]"
      />
      <van-field
        v-model="password1"
        type="password"
        name="password1"
        label="密码"
        left-icon="lock"
        placeholder="请输入密码"
        :rules="[
          { required, message: '请输入密码' },
          { pattern: pattern2, message: '密码长度为6到18位' },
        ]"
      />
      <van-field
        v-model="password2"
        type="password"
        name="password2"
        label="确认密码"
        left-icon="lock"
        placeholder="请再次输入密码"
        :rules="[
          { required: false, message: '输入密码与第一次不一致' },
          { validator: Validator, message: '输入密码与第一次不一致' },
        ]"
      />
      <van-field
        v-model="sms"
        center
        clearable
        label="邮箱验证码"
        placeholder="请输入邮箱验证码"
      >
        <template #button>
          <van-button round size="small" type="primary">发送验证码</van-button>
        </template>
      </van-field>
      <div style="margin: 16px">
        <van-button round block type="info" native-type="submit"
          >注册</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
// import axios from "axios";
export default {
  name: "register",
  data() {
    return {
      email: "gyg@qw.wqw",
      password1: "1111111111",
      password2: "",
      sms: "",
      pattern:
        /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/,
      pattern2: /^[0-9A-Za-z]{6,18}$/,
    };
  },
  methods: {
    onClickLeft() {
      this.$router.push("/login");
    },
    onSubmit() {
      console.log(this.email);
      this.axios
        .post(this.URL + "/register", {
          email: this.email,
          password1: this.password1,
        })
        .then(function (res) {
          console.log(res);
        })
        .catch(function (err) {
          Toast("注册失败");
        });
      console.log("end")
    },
    // Validator(val){
    //     if(values.password2==null){
    //         console.log("1111")
    //         disabled="turn"
    //     }
    // },
  },
};
</script>

<style scoped>
.img_box {
  width: 100%;
  text-align: center;
  margin: 0.2rem auto;
}
</style>